<!-- dashboard-data -->
<template>
  <div class="dashboard-data">
    <div class="data1">
      <!-- 标题 -->
      <div class="data1-title">
        <h2>统计数据</h2>
      </div>
      <!-- 内容 -->
      <div class="data1-container">
        <div class="data1-item">
          <i class="iconfont icon-yonghu1 total-people"></i>
          <div class="data1-item-content">
            <h2>玩家总数</h2>
            <span>19222</span>
          </div>
        </div>
        <div class="data1-item">
          <i class="iconfont icon-ic_user_zx online-people"></i>
          <div class="data1-item-content">
            <h2>玩家当前在线</h2>
            <span>12346</span>
          </div>
        </div>
        <div class="data1-item">
          <i class="iconfont icon-guanliyuan total-gm"></i>
          <div class="data1-item-content">
            <h2>GM总数</h2>
            <span>34</span>
          </div>
        </div>
        <div class="data1-item">
          <i class="iconfont icon-guanliyuan1 online-gm"></i>
          <div class="data1-item-content">
            <h2>GM在线人数</h2>
            <span>22</span>
          </div>
        </div>
      </div>
    </div>
    <div class="dataTwo">
      <!-- 近七日用户量 -->
      <div id="data2"></div>
      <!-- 男女用户比例 -->
      <div id="data3"></div>
    </div>
    <!-- <div class="data-everyday">
      <div class="data-title">
        <h2>每日数据</h2>
      </div>
      <div class="data-day-container">
        <el-table :data="tableData" border style="width: 100%">
          <el-table-column prop="date" label="日期" width="120">
          </el-table-column>
          <el-table-column prop="name" label="新增用户" width="120">
          </el-table-column>
          <el-table-column prop="name" label="在线人数占比" width="120">
          </el-table-column>
          <el-table-column prop="name" label="成交金额" width="180">
          </el-table-column>
          <el-table-column prop="address" label="人均在线时间">
          </el-table-column>
        </el-table>
      </div>
    </div> -->
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import * as echarts from 'echarts';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      tableData: [
        {
          date: '2020-05-02',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        },
        {
          date: '2020-05-04',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1517 弄'
        },
        {
          date: '2020-05-01',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1519 弄'
        },
        {
          date: '2020-05-03',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1516 弄'
        }
      ]
    };
  },

  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    var chartDom1 = document.getElementById('data2');
    var myChart1 = echarts.init(chartDom1);
    var option1;

    var chartDom = document.getElementById('data3');
    var myChart = echarts.init(chartDom);
    var option;

    option1 = {
      title: {
        text: '近一周用户量'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['总用户量', '在线人数']
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '总用户量',
          type: 'line',
          data: [12000, 13200, 13501, 16340, 16900, 18230, 19222]
        },
        {
          name: '在线人数',
          type: 'line',
          data: [6821, 7182, 7591, 6234, 9290, 16330, 15310]
        }
      ]
    };
    option1 && myChart1.setOption(option1);

    option = {
      title: {
        text: '男女玩家比例',
        left: 'center'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        orient: 'vertical',
        left: 'left'
      },
      series: [
        {
          name: 'sex',
          type: 'pie',
          radius: '50%',
          data: [
            { value: 10482, name: '男', itemStyle: { color: '#73c0de' } },
            { value: 8740, name: '女', itemStyle: { color: '#ee6666' } }
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }
      ]
    };

    option && myChart.setOption(option);
  },
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style lang="less" scoped>
.dashboard-data {
  .data1 {
    height: 170px;
    background: #fff;
    .data1-title h2 {
      height: 40px;
      font-size: 18px;
      color: #666;
      line-height: 30px;
      font-weight: normal;
      padding-left: 10px;
    }
    .data1-container {
      display: flex;
      justify-content: space-around;
      .data1-item {
        width: 220px;
        height: 100px;
        box-sizing: border-box;
        border-radius: 5px;
        border: 1px solid #eee;
        background: #fff;
        padding: 10px;
        display: flex;
        .total-people {
          font-size: 50px;
          line-height: 80px;
          color: #409eff;
        }
        .online-people {
          font-size: 50px;
          line-height: 80px;
          color: #74bf52;
        }
        .total-gm {
          color: #f04864;
          font-size: 50px;
          line-height: 80px;
        }
        .online-gm {
          color: #14c2c3;
          font-size: 50px;
          line-height: 80px;
        }
        .data1-item-content {
          width: 100%;

          h2 {
            color: #717073;
            font-size: 20px;
          }
          span {
            color: #717073;
            font-size: 26px;
            font-weight: 600;
            margin-top: 10px;
            margin-right: 30px;
            float: right;
          }
        }
      }
    }
  }

  .dataTwo {
    display: flex;
    justify-content: space-between;
    #data2 {
      width: 600px;
      height: 300px;
      margin-top: 20px;
      padding: 20px;
      background: #fff;
    }
    #data3 {
      width: 300px;
      height: 300px;
      margin-top: 20px;
      padding: 20px;
      background: #fff;
    }
  }
}
</style>
